<template>
	<view class="">
		<view class="" style="margin: 20rpx 0;background: #fff;padding: 20rpx 0;">
			<view class="" v-for="(item,indexs) in list" :key="indexs">
				<uni-collapse :border="false" @change="checPickup($event,item,indexs)">
					<uni-collapse-item titleBorder="none">
						<template v-slot:title>
							<view class="titiles ">
								<view class="titiles-up dis">
									<view class="titiles-up-left">

										第{{item.batch}}份({{item.isGet==true?'已领取':'未领取'}})
									</view>
									<!-- <view class="titiles-up-right">
										<image src="@/static/com/icon_sc.png" mode=""></image>
									</view> -->
								</view>

							</view>
						</template>
						<view class="content">

							<view class="safeguardPup-wrap" v-if="item.isGet==false">
								<view class="safeguardPup-msg dis">

									<view class="safeguardPup-msg-img">

										<image :src="qrcodeSrc" mode=""></image>
										<!-- <canvas v-if="item.showEwm==true" :canvas-id="'qrcode'+indexs"
											:style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" /> -->
									</view>

									<view style="color: #46B681;font-size: 40rpx;"
										class="safeguardPup-msg-msg safeguardPup-msg-msg1" @click="saveImg">点击保存
									</view>
									<view style="color: #46B681;" class="safeguardPup-msg-msg">
										请使用本小程序的‘首页或者我的页面扫一扫’，进行领取</view>
									<view class="safeguardPup-msg-msg safeguardPup-msg-msg1">若被赠送人7天内未接收赠送则对应转赠批次将自动退回
									</view>
								</view>

							</view>
							<view class="block_4 flex-row" v-for="(items,index) in item.productList" :key="index">

								<image class="image_2" referrerpolicy="no-referrer" :src="items.image" />
								<view class="box_6 flex-col">
									<view class="text_6 dis justify-between">
										<view class="line1">{{items.name}}</view>
										<view>提取：{{items.yieldNum}}</view>
									</view>
									<view class="text_6">产量:{{items.yield}}</view>
									<view class="text_6">可提货时间:{{items.getDay}}</view>
									<view class="box_7 flex-row">

									</view>
								</view>
							</view>

						</view>
					</uni-collapse-item>

				</uni-collapse>

			</view>

		</view>
		<!-- <view class="footer">
			<view class="footer-btn" @click="submit">
				确认赠送
			</view>

		</view> -->
		<!-- 		<uni-popup ref="checPickupPup" type="center">
			<view class="safeguardPup-wrap">

				<view class="safeguardPup-head safeguardPup-head1 dis">
					<view class="">

					</view>
					<view class="safeguardPup-head-center">转增二维码</view>
					<view class="safeguardPup-head-right">
						<image src="@/static/com/icon_close.png" mode=""></image>
					</view>
				</view>
				<view class="safeguardPup-msg dis">
					<view class="safeguardPup-msg-msg">用于自提订单核销</view>
					<view class="safeguardPup-msg-img">
						<canvas canvas-id="qrcode" :style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" />
					</view>
					<view class="safeguardPup-msg-msg">提取码:98AK67</view>
					<view class="safeguardPup-msg-msg safeguardPup-msg-msg1" @click="saveImg">点击保存</view>
				</view>

			</view>

		</uni-popup> -->
	</view>
</template>

<script>
	import {
		getTransOrderInfo,
		getTransOrderQrcode
	} from '@/api/togeterRich/order.js'
	import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js'
	export default {
		data() {
			return {

				itemUrl: '',
				vModelValue: '',
				// 二维码标识串
				qrcodeText: '',
				// 二维码尺寸
				qrcodeSize: 136,

				// 最终生成的二维码图片
				qrcodeSrc: '',
				list: [],
				order_id: ''
			}
		},
		onLoad(e) {
			this.order_id = e.order_id
			this.init()

			// this.checPickup(1)
		},
		methods: {
			// 获取 access_token
			getAccessToken(item) {
				let appid = "wx756a0798b5a77803"
				let secret = "e454e3250c2e9f5d28989ed85517af74"
				uni.request({
					method: "GET",
					url: `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`,
					success: (result) => {
						console.log(result, 'resultresultresultresult')
						let access_token = result.data.access_token
						// 获取到 access_token 后 获取二维码
						this.getQrCode(access_token, item)
					}
				})
			},
			// 获取二维码
			getQrCode(token, item) {
				console.log(item, 'woshisha a')
				// 注意 access_token 参数是必须放在url后面 其余参数 要在data里面
				let path = 'pages/index/index'
				uni.request({
					method: "POST",
					responseType: 'arraybuffer', // 注意一定要加 不然返回的Buffer流会乱码 导致无法转base64
					url: `https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=${token}`,
					data: {
						page: path, // 需要打开的页面路径
						scene: item.code // 这个是需要传递的参数
					},
					success: (result) => {
						// console.log(result, '这是啥啊')
						// 拿到buffer流 通过wx.arrayBufferToBase64 转成base64 在页面展示
						// 如果不加请求时 responseType: 'arraybuffer' 则会转码失败
						this.qrcodeSrc = "data:image/png;base64," + wx.arrayBufferToBase64(result.data);
						// console.log(this.qrcodeSrc, 'qrcodeSrc')
					},
				})
			},
			// template 部分
			// <image :src="bufferImg" style="width: 200px;height: 200px"></image>




			init() {
				getTransOrderInfo(this.order_id).then(res => {
					console.log(res, 'ddd')
					res.data.map(ress => {
						ress.showEwm = false
					})
					this.list = res.data
				})
			},
			//保存图片
			saveImg() {
				let imgbase64url = this.qrcodeSrc
				let base64 = imgbase64url.replace(/^data:image\/\w+;base64,/, ""); //图片替换
				let filePath = wx.env.USER_DATA_PATH + `/qrcode_id_${new Date().getTime()}.png`;
				uni.getFileSystemManager().writeFile({
					filePath: filePath, //创建一个临时文件名
					data: base64, //写入的文本或二进制数据
					encoding: 'base64', //写入当前文件的字符编码
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath: filePath,
							success: () => {
								uni.showToast({
									title: "图片保存成功，请到手机相册查看",
									icon: "none",
									duration: 5000
								})
							},
							fail: (err) => {
								console.log(err);
								uni.showToast({
									title: '图片保存失败',
									icon: "none",
									duration: 5000
								})
							}
						})
					},
					fail: (err) => {
						console.log(err)
					}
				})

			},

			saveIm1g() {


				return;
				console.log(this.qrcodeSrc, 'qrcodeSrcqrcodeSrc')
				let that = this
				uni.saveImageToPhotosAlbum({
					filePath: that.qrcodeSrc,
					success: function(e) {

						uni.showToast({
							title: "保存成功,请在手机相册中查看",
							icon: 'none',
							duration: 2000
						})
						console.log('save success');
					}
				});

			},
			// 查看二维码
			checPickup(e, item, indexs) {
				// this.getAccessToken()

				console.log(e, item, indexs, 'JJJ')
				if (item.isGet == false) {
					this.getAccessToken(item)
					// return;
					// let ddda = {
					// 	"path": "pages/index/index",
					// 	"sence": item.code
					// }
					// getTransOrderQrcode(ddda).then(res => {
					// 	this.itemUrl = res.data.code
					// 	console.log(res, 'RES这是杀啊')
					// })
				

				}

				if (e && e[0] == '0') {

					item.showEwm = true
				} else {
					item.showEwm = false

				}


			},
			submit() {
				let that = this
				uni.showModal({
					title: '转赠生成成功',
					content: '快去分享二维码给好友进行领取吧 若被赠送人7天内未接收赠送则对应转赠批次将自动退回',
					confirmText: "查看分享", // 确认按钮的文字  
					showCancel: false, // 是否显示取消按钮，默认为 true
					confirmColor: '#46B681',
					cancelColor: '#39B54A',
					success: (res) => {
						if (res.confirm) {
							that.checPickup()

							console.log('comfirm') //点击确定之后执行的代码
						} else {
							console.log('cancel') //点击取消之后执行的代码
						}
					}
				})

			},
		}
	}
</script>

<style lang="scss" scoped>
	.safeguardPup-wrap {
		.safeguardPup-msg {

			margin: 0 0 30rpx auto;
			justify-content: space-between;
			font-size: 28rpx;
			flex-direction: column;
			text-align: center;

			.safeguardPup-msg-msg1 {

				margin: 20rpx 0;
			}

			.safeguardPup-msg-msg {
				text-align: center;
				color: #3D3D3D;
				font-size: 22rpx;
			}

			.safeguardPup-msg-img {
				width: 250rpx;
				height: 250rpx;
				margin: 30rpx auto;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.safeguardPup-head1 {
			justify-content: space-between;
			padding: 36rpx 36rpx 0 36rpx;

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}


		margin: 0 auto;
		background: #fff;
		border-radius: 20rpx;
	}

	.footer {
		width: 100%;
		position: fixed;
		bottom: 0;
		background: #fff;
		z-index: 1000;
		padding: 30rpx 0;

		.footer-btn {
			width: 90%;
			margin: 0 auto;
			font-size: 28rpx;
			line-height: 80rpx;
			border-radius: 100rpx;
			background: $maincolor;
			text-align: center;
			color: #fff;
		}
	}

	.titiles {
		height: 110rpx;
		margin-left: 20rpx;

		.titiles-bom {
			font-size: 22rpx;
			color: #999;
			margin-top: 20rpx;
		}

		.titiles-up {
			align-items: center;

			.titiles-up-left {
				font-size: 32rpx;
				color: #333;
				padding-left: 20rpx;
				border-left: 7rpx solid;

				border-left: 6rpx solid $maincolor;
			}

			.titiles-up-right {
				width: 30rpx;
				margin-left: 20rpx;
				height: 30rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.head-wrap {
		background: #fff;
		width: 100%;
		padding: 20rpx 0;

		.head {
			width: 92%;
			margin: 20rpx auto;

			.head-img {
				width: 170rpx;
				height: 170rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.head-msg {
				margin-left: 20rpx;
				width: 70%;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 5;
				/* 限制在三行 */
				-webkit-box-orient: vertical;

			}
		}

	}

	@import '@/pagesB/fosterOrder/com/obtainable.css';
	@import '@/com/css/common.css';
</style>